<template>
  <div class="sys-param-page">
    <el-card shadow="never">
      <div slot="header">系统参数</div>
      <div class="filter-bar" style="margin-bottom: 12px;">
        <el-input v-model="filters.name" placeholder="参数名" size="small" style="width: 120px; margin-right: 8px;" clearable />
        <el-input v-model="filters.value" placeholder="参数值" size="small" style="width: 120px; margin-right: 8px;" clearable />
        <el-input v-model="filters.desc" placeholder="描述" size="small" style="width: 140px; margin-right: 8px;" clearable />
        <el-button type="primary" size="small" @click="handleFilter">查询</el-button>
        <el-button size="small" @click="resetFilter">重置</el-button>
      </div>
      <el-table :data="pagedData" border stripe style="width: 100%">
        <el-table-column prop="name" label="参数名" width="150" />
        <el-table-column prop="value" label="参数值" width="150" />
        <el-table-column prop="desc" label="描述" />
        <el-table-column prop="updateTime" label="最后修改时间" width="180" />
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button size="mini" @click="editParam(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 12px; text-align: right;">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="filteredData.length"
          :page-size="pageSize"
          :current-page.sync="currentPage"
        />
      </div>
    </el-card>
    <el-dialog title="编辑参数" :visible.sync="editDialogVisible" width="400px">
      <el-form :model="editForm">
        <el-form-item label="参数名">
          <el-input v-model="editForm.name" disabled />
        </el-form-item>
        <el-form-item label="参数值">
          <el-input v-model="editForm.value" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="editForm.desc" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveParam">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'SystemParamsView',
  data() {
    return {
      filters: { name: '', value: '', desc: '' },
      currentPage: 1,
      pageSize: 5,
      tableData: [
        { name: '系统名称', value: '人生管理系统', desc: '系统主标题', updateTime: '2024-06-01 10:00:00' },
        { name: '最大登录尝试', value: '5', desc: '连续登录失败次数上限', updateTime: '2024-06-01 10:00:00' },
        { name: '默认主题色', value: '#4a9eff', desc: '系统主色调', updateTime: '2024-06-01 10:00:00' },
      ],
      editDialogVisible: false,
      editForm: { name: '', value: '', desc: '' },
      editIndex: -1
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(row => {
        const nameMatch = !this.filters.name || row.name.includes(this.filters.name);
        const valueMatch = !this.filters.value || row.value.includes(this.filters.value);
        const descMatch = !this.filters.desc || row.desc.includes(this.filters.desc);
        return nameMatch && valueMatch && descMatch;
      });
    },
    pagedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.filteredData.slice(start, start + this.pageSize);
    }
  },
  methods: {
    handleFilter() {
      this.currentPage = 1;
    },
    resetFilter() {
      this.filters = { name: '', value: '', desc: '' };
      this.currentPage = 1;
    },
    editParam(row) {
      this.editForm = { ...row };
      this.editIndex = this.tableData.findIndex(item => item.name === row.name);
      this.editDialogVisible = true;
    },
    saveParam() {
      if (this.editIndex !== -1) {
        this.tableData[this.editIndex] = {
          ...this.editForm,
          updateTime: new Date().toLocaleString()
        };
      }
      this.editDialogVisible = false;
    }
  }
}
</script>
<style scoped>
/* .sys-param-page { padding: 30px; } */
</style> 